<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>更新资料</title>
    <!-- 引入layui核心样式 -->
    <link rel="stylesheet" href="../../lib/layui/css/layui.css"/>
    <!-- 引入layui核心JS-->
    <script src="../../lib/layui/layui.js"></script>
    <link rel="stylesheet" href="../../css/form.css"/>
</head>
<body>
<form class="layui-form personal-form" lay-filter="setting">
    <div class="layui-form-item">
        <label class="layui-form-label">
            用户编码<span class="required">&nbsp;</span>
        </label>
        <div class="layui-input-inline">
            <input type="text" name="userCode" placeholder="请输入用户编码" autocomplete="off" disabled
                   lay-verify="required" lay-reqtext="请输入用户编码" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">
            用户名称<span class="required">*</span>
        </label>
        <div class="layui-input-inline">
            <input type="text" name="userName" placeholder="请输入用户名称" autocomplete="off"
                   lay-verify="required|checkUserName" lay-reqtext="请输入用户名称" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">
            性别<span class="required">&nbsp;</span>
        </label>
        <div class="layui-input-inline">
            <input type="radio" name="gender" value="2" title="男" checked>
            <input type="radio" name="gender" value="1" title="女">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">
            生日<span class="required">&nbsp;</span>
        </label>
        <div class="layui-input-inline layui-input-wrap">
            <div class="layui-input-prefix">
                <i class="layui-icon layui-icon-date"></i>
            </div>
            <input type="text" id="birthday" placeholder="yyyy-MM-dd" autocomplete="off" class="layui-input"
                   name="birthday" lay-verify="date">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">
            手机号码<span class="required">&nbsp;</span>
        </label>
        <div class="layui-input-inline">
            <input type="tel" name="phone" lay-verify="required|phone" lay-reqtext="请填写手机号"
                   autocomplete="off"  lay-affix="clear" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">
            地址<span class="required">&nbsp;</span>
        </label>
        <div class="layui-input-inline">
            <input type="text" name="address" placeholder="请输入地址" autocomplete="off"
                   lay-verify="required|checkAddress" lay-reqtext="请输入地址" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">
            用户角色<span class="required">&nbsp;</span>
        </label>
        <div class="layui-input-inline">
            <select name="userRole" lay-verify="required" lay-search id="userRole">
                <option value="">直接选择或搜索选择</option>
            </select>
        </div>
    </div>
    <div class="layui-form-item personal-form-btn-box">
        <div class="layui-input-inline">
            <button type="reset" class="layui-btn layui-btn-primary">重置</button>
            <button type="button" class="layui-btn" lay-submit lay-filter="setting">确认</button>
        </div>
    </div>
</form>
</body>
<script>
    // 获取layui内置模块
    let laydate = layui.laydate
    let $ = layui.$
    let layer = layui.layer
    let form = layui.form

    layui.use(function () {
        laydate.render({
            elem: '#birthday'
        })
        getALlRole()

        /*// 先发起请求，ajax请求是一个异步的过程，执行发起请求后，里面运行后面的代码，并不会等待结果返回之后才执行其他的
        $.get('/soms/server/role?type=getAll', function (result) {
            console.log('获取所有的角色')
            result.forEach(item => {
                let option = "<option value='" + item.id + "'>" + item.roleName + "</option>"
                $("#userRole").append(option)
            })
            // 动态化改变layui的form内部元素，需要重新渲染
            form.render('select')
        })
        // 后发起请求
        $.get('/soms/server/user?type=getLoginUser', function (result) {
            console.log('获取当前用户')
            if(result.code === 200) {
                let user = result.data
                console.log(user)
                // 表单赋值
                form.val('setting', {
                    // 前面的属性名是表单中每一项的name属性
                    // 后面的user.属性名，是Java代码中User类的属性
                    userCode: user.userCode,
                    userName: user.userName,
                    gender: user.gender,
                    birthday: user.birthday,
                    phone: user.phone,
                    address: user.address,
                    userRole: user.userRole
                })
            }
        })*/
    })

    /**
     * 获取所有角色
     */
    function getALlRole() {
        $.get('/soms/server/role?type=getAll', function (result) {
            result.forEach(item => {
                let option = "<option value='" + item.id + "'>" + item.roleName + "</option>"
                $("#userRole").append(option)
            })
            // 动态化改变layui的form内部元素，需要重新渲染
            form.render('select')
            // 等待角色渲染完成之后再获取当前用户
            getLoginUser()
            initForm()
        })
    }

    /**
     * 获取当前用户信息
     */
    function getLoginUser() {
        $.get('/soms/server/user?type=getLoginUser', function (result) {
            if(result.code === 200) {
                let user = result.data
                // 表单赋值
                form.val('setting', {
                    // 前面的属性名是表单中每一项的name属性
                    // 后面的user.属性名，是Java代码中User类的属性
                    userCode: user.userCode,
                    userName: user.userName,
                    gender: user.gender,
                    birthday: user.birthday,
                    phone: user.phone,
                    address: user.address,
                    // 赋值角色前必须先加载完成所有的角色
                    userRole: user.userRole
                })
            }
        })
    }

    /**
     * 定义layui的表单验证规则和提交事件
     */
    function initForm() {
        form.verify({
            'checkUserName': function (value) {
                if (value.length > 15) {
                    return '用户名称不能长于15个字符'
                }
            },
            'checkAddress': function (value) {
                if (value.length > 30) {
                    return '地址不能长于30个字符'
                }
            }
        })

        form.on('submit(setting)', function (data) {
            // 获取所有的字段数据
            // 表单所有字段封装成的js对象
            let field = data.field
            $.ajax({
                url: '/soms/server/user',
                type: 'POST',
                data: {
                    type: 'setting',
                    data: JSON.stringify(field) // 转成JSON字符串
                },
                success: function (result) {
                    if (result.code === 200) {
                        // 刷新home页面
                        parent.location.reload()
                    } else {
                        layer.msg(result.msg, {icon: 2})
                    }
                },
                error: function (error) {
                    layer.msg('请求失败', {icon: 2})
                }
            })
            return false
        })
    }
</script>
</html>